<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  
  <#include "../common/header.html">

</head>
<body class="hold-transition skin-purple-light sidebar-mini">
  <div class="wrapper">	
  
  <!-- 	顶部和左侧菜单的jsp s -->
  <#include "../common/menu.html">
  <!-- 	顶部和左侧菜单的jsp e -->
  
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
       	饭堂应用列表
      </h1>
    </section>
    
    <section class="content-header condition clearfix ">
    <form action="#" id="fromCondition">
     <div class="form-group">
          <label>状态:</label>
          <select class="form-control select2" style="width: 100%;" name="search_EQ_INTEGER_status">
           	  <option selected="selected" value="">全部</option>
           	  <#list statusMap?keys as key>  
               		<option value="${key}">${statusMap[key]!}</option>
        	  </#list>  
          </select>
    </div> 
     <div class="form-group" >
         <label>卡号:</label>
         <input type="text" class="form-control" name="search_LK_STRING_cardNum">
     </div>
     
     <div class="form-group" >
         <label>手机号码:</label>
         <input type="text" class="form-control" name="search_EQ_STRING_phone">
     </div>
     
     <!-- Date range -->
          <div class="form-group">
              <label>创建时间:</label>

               <div class="input-group">
                  <div class="input-group-addon">
                  <i class="fa fa-calendar"></i>
               </div>
              <input type="text" class="form-control pull-right daterange" name="search_DATERANGE_STRING_createTime"/>
             </div>
            <!-- /.input group -->
        </div>
     <!-- /.form group -->
       <div class="form-group"  style="margin-top: 28px;margin-left: 15px;">
              <input type="submit" value="查询" id="submit"/>&nbsp&nbsp
              <input type="reset" value="清空" id="reset"/>
        </div>
    </form>
    </section>

    <!-- Main content -->
    <section class="content" style="padding-bottom: 0px;">
      <div class="row">
        <div class="col-xs-12">
         

          <div class="box">
          
            <!-- /.box-header -->
            <div class="box-body">
              <table id="dataTable" class="table table-bordered table-striped" style="min-width: 1623px;">
                <thead>
                <tr>
                  <th>选择</th>                  
                  <th>用户标识</th>
                  <th>用户名</th>
                  <th>手机号码</th>
                  <th>卡号</th>
                 <!--  <th>应用标识</th> -->
                <!--   <th>状态</th> -->
                  <th>创建时间</th>
                  <th>更新时间</th>
                  <th>是否绑定</th>
                  <th>操作者</th>               
                </tr>
                </thead>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->
    
    <section class="content-header condition clearfix " style="padding: 0px 14px">
  		 <!--  <button onclick="window.location.href='/cloudpay/card/toCardAddPage';" class="btn btn-default" style="margin-right: 10px">新增记录</button> -->
  		<!--   <button onclick="effectiveStatus();" class="btn btn-default" style="margin-right: 10px">启用状态</button>
  		  <button onclick="unEffectiveStatus();" class="btn btn-default" style="margin-right: 10px">停用状态</button> -->
  		  <button onclick="availableExist();" class="btn btn-default" style="margin-right: 10px">绑定</button>
  		  <button onclick="availableDelete();" class="btn btn-default" style="margin-right: 10px">解绑</button>
    </section>
    
   <#include "../common/errorMsg.html">
    
    <!-- <section class="content-header condition clearfix " style="padding: 5px 14px">
    <form action="/cloudpay/card/importUserAction" method="POST" enctype="multipart/form-data">
     	 <div class="form-group">
                  <label for="exampleInputFile">导入用户</label>
                  <input type="file" name="userFile"/>
                  <#if errorMsgList?? && (errorMsgList?size > 0) >
                  <#list errorMsgList as errorMsg>
 						<label class="control-label" for="inputError" style="color:#dd4b39;width: 370px;max-width: 500px"><i class="fa fa-times-circle-o"></i> ${errorMsg}</label><br/>
				  </#list>                 
                  </#if>
          </div>
           <input type="submit" value="提交" style="margin-top: 25px ;margin-right: 10px;">
             <a href="/exceltemplate/template.xlsx" download="template.xlsx">下载模板</a>
    </form>
  
    </section>  -->
  </div>
 
</div>
<!-- ./wrapper -->
</body>
<script>
  //存放选中行的id的数组
  var selected = [];
  
  //adminlte表格的对象
  var datatable = null;
  var formValidator = null;
  
  $(function () {
		    
	   var vm = new Vue({
	 		el: '#fromCondition',
		    methods: {
		    	submitForm: function () {
				  	datatable.draw();				
		        }
      	  }
  	  })
	   
	   //校验器
		formValidator = $("#fromCondition").validate(
				{
					onkeyup : false,
					focusInvalid : false,  //错误时,错误选项不会得到焦点
					focusCleanup : true,   //得到焦点时，清空错误提示信息
					submitHandler : function() { //表单提交句柄,为一回调函数，带一个参数：form
						vm.submitForm();
					},
					rules : {						
						search_LK_STRING_cardNum : {
							yctCardNum:true,
							number:true
						},
						search_EQ_STRING_phone : {
							mobile:true,
							
						}
					},
					messages : {
						
						search_LK_STRING_cardNum : {
							yctCardNum:"请输入8位或10位或16位羊城通卡号",
							number:"只能输入数字"
						},
						search_EQ_STRING_phone : {
							mobile:"请输入正确手机号码"
						}
					}
				});
       
     
	   datatable = $('#dataTable').DataTable({ 
           'paging'      : true,
           'lengthChange': true,
           'searching'   : false,
           'ordering'    : true,
           'info'        : true,
           'autoWidth'   : true,
           "scrollX"	 : true,
           "scrollY"	 : true ,  
           "processing"	 : true,
           "serverSide"	 : true,
           "pagingType": "full_numbers",
           "language": {
               "lengthMenu":   "显示 _MENU_ 条记录",
               "zeroRecords":  "没有符合条件的记录",
               "info":         "第 _PAGE_ 页,共 _PAGES_ 页",
               "infoEmpty":    "没有符合条件的记录",
               "paginate": {
            	   "first":     "第一页",
            	   "next":      "下一页",
            	   "previous":  "上一页",
            	   "last":      "最后一页"
                }           	  
           },
           //如果查询条件有校验，需要加这个
           "preDrawCallback": function( settings ) {
        	   if(!isEmpty(formValidator)) {
        		   if(!formValidator.valid()) {
            		   return false;
            	   }
        	   }  
        	},
           "drawCallback": function( settings ) {
        	   //每次重画后,清空选中的记录
	    		selected.splice(0,selected.length);
           },
           "ajax": {
               "url": "/cloudpay/card/getCardListData",
               "type": "POST",
               "data": function ( d ) {
            	  var formData = $("#fromCondition").serializeJson();
            	  for(var obj in formData)  {
            		  d[obj+""] = formData[obj];
            	  }
              }
           },
           "columns": [   
			   { "data": "id", "orderable": false,"render":function(data, type, full, meta) {
	                 return  '<input type="checkbox" value="' + data + '">';
               }},        
               { "data": "userId" },
               { "data": "userName" },
               { "data": "phone" },
               { "data": "cardNum" },
              /*  { "data": "appId" }, */
             /*   { "data": "status" ,
            	 "render": function ( data, type, full, meta ) {     
            	   <#list statusMap?keys as key>
            	   	  if(data == '${key}') {
            	   		  return '${statusMap[key]!}';
            	   	  }	
       	  		  </#list>            	   
               }}, */
               { "data": "createTime"},
               { "data": "updateTime"},
               { "data": "available",
            	  "render":function(data, type, full, meta) {
            		  <#list availableMap?keys as key>
            	   	  if(data == '${key}') {
            	   		  return '${availableMap[key]!}';
            	   	  }	
       	  		  	  </#list>   
            	  }},
               { "data": "operator"}            
			]           
         })
});

  //启用记录
 function effectiveStatus() {
	 if(window.confirm('你确定要启用记录状态吗？')){
		 $.ajax({
			 url : '/cloudpay/card/statusToEffectiveAction',
			 type : "POST",
			 async:false,
			 dataType : "json",
			 data : {recordIds:selected},
			 success : function(result) {
				 //如果返回成功
				 if(result.result_code == successRespCode) {
					datatable.draw();		
				 } else {
					 alert(result.err_msg);
				 }
			 }
		 });
	 }
		 
 }
 
 //停用记录
 function unEffectiveStatus() {
	 if(window.confirm('你确定要停用记录状态吗？')){
		 $.ajax({
			 url : '/cloudpay/card/statusToUneffectiveAction',
			 type : "POST",
			 async:false,
			 dataType : "json",
			 data : {recordIds:selected},
			 success : function(result) {	
				 //如果返回成功
				 if(result.result_code == successRespCode) {
					datatable.draw();		
				 } else {
					 alert(result.err_msg);
				 }
			 }
		 });
	 }
	
 }
 
 //回复绑定
 function availableExist() {
	 if(window.confirm('你确定要绑定记录吗？')){
		 $.ajax({
			 url : '/cloudpay/card/availableExistAction',
			 type : "POST",
			 async:false,
			 dataType : "json",
			 data : {recordIds:selected},
			 success : function(result) {			
				 //如果返回成功
				 if(result.result_code == successRespCode) {
					datatable.draw();		
				 } else {
					 alert(result.err_msg);
				 }
			 }
		 }); 
	 }
	
 }
 
 //解绑
 function availableDelete() {
	 if(window.confirm('你确定要解绑记录吗？')) {
		 $.ajax({
			 url : '/cloudpay/card/availableDeleteAction',
			 type : "POST",
			 async:false,
			 dataType : "json",
			 data : {recordIds:selected},
			 success : function(result) {
				 //如果返回成功
				 if(result.result_code == successRespCode) {
					datatable.draw();		
				 } else {
					 alert(result.err_msg);
				 }
			 }
		 });
	 }	
 }
 
</script>
 <script src="${resurcePath}/cloudpay/js/common/dataTable.js"></script>
</html>